<template>
	<div class="count">
		<h2>{{miaoshu}}</h2>
		<h2>当前求和为:{{he}}</h2>
		<h2>当前求和乘10为:{{$store.getters.bigSum}}</h2>
		<select v-model.number="n">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<button @click="increment">加</button>
		<button @click="decrement">减</button>
		<button @click="incrementIfOdd">当前和为奇数再加</button>
		<button @click="incrementWait">等一等再加</button>
		<button @click="incrementAjax">联系一下服务器，看看加几</button>
	</div>
</template>

<script>
	import {mapState} from 'vuex'

	export default {
		name:'Count',
		data() {
			return {
				n:1,
			}
		},
		methods: {
			//加法
			increment(){
				this.$store.commit('JIA',this.n)
			},
			//减法
			decrement(){
				this.$store.commit('JIAN',this.n)
			},
			//和为奇数再加
			incrementIfOdd(){
				this.$store.dispatch('jiaOdd',this.n)
			},
			//等一等再加
			incrementWait(){
				this.$store.dispatch('jiaWait',this.n)
			},
			//联系服务器加
			incrementAjax(){
				this.$store.dispatch('jiaAjax')
			},
		},
		computed: {
			//靠程序员不怕辛苦，不怕恶心的自己写计算属性：miaoshu、he
			/* miaoshu(){
				return this.$store.state.description
			},
			he(){
				return this.$store.state.sum
			} */

			//（第一种写法,对象式）靠mapState读取vuex中state里的description、sum，并生成计算属性：miaoshu、he
			// ...mapState({miaoshu:'description',he:'sum'})

			//（一种复杂的写法，了解即可）
			...mapState({
				miaoshu: state => state.description,
				he:state => state.sum,
			})


			/* **************************************************************** */
			//靠程序员不怕辛苦，不怕恶心的自己写计算属性：description、sum
			/* description(){
				return this.$store.state.description
			},
			sum(){1
				return this.$store.state.sum
			} */

			//（第二种写法，数组式）靠mapState读取vuex中state里的description、sum，并生成计算属性：description、sum
			// ...mapState(['description','sum'])

		}
	}
</script>

<style>
	.count{
		background-color: skyblue;
		padding: 20px;
	}
	select,button{
		height: 30px;
		margin-right: 10px;
	}
</style>